<template>
    <div class="editor">
      <div ref="editor" style="text-align:left"></div>
      <button class="send" v-on:click="getContent">发表评论</button>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'Editor',
  data () {
    return {
      editorContent: ''
    }
  },
  methods: {
    getContent: function () {
      alert(this.editorContent)
    }
  },
  mounted () {
    var editor = new E(this.$refs.editor)
    // 自定义菜单配置
    editor.customConfig.menus = [
      'head',
      'bold',
      'italic',
      'underline',
      'emoticon',
      'image',
      'code',
      'undo'
    ]
    editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = '/upload'// 上传图片到服务器
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    editor.create()
  }
}
</script>

<style scoped lang="stylus">
  .editor
    padding-bottom 24px
  .send
    float right
    width 90px
    height 35px
    background #23BDBD
    border-radius 3px
    margin-top 8px
    font-size 14px
    color #fff
    cursor pointer
  .send:hover
    background #0FB6BD
</style>
